<template>
  <div class="panel">
    <!--頁首-->
    <div class="page-header">
      管理员
      <div class="page-header-rightbtn">
        <el-button size="mini" icon="el-icon-plus" type="success" @click="openNewForm()">{{submitLoading ? '正在提交' : '新增'}}</el-button>
      </div>
    </div>
    <!--頁body-->
    <div class="page-body">
      <!--頁尾(body)-->
      <div class="page-nav">
        <!--page-nav 放搜尋列和 刪除按鈕-->
        <!--搜尋列-->
        <div class="search-header">
          <el-form  size="small"  :inline="true" :model="ruleForm" ref="ruleForm"  @keyup.native.enter="onSearchSubmit" @submit.native.prevent>
            <el-form-item  prop="managerName" class="search-width153" label="">
              <el-input v-model="ruleForm.managerName"  placeholder="管理员"></el-input>
            </el-form-item>
          </el-form>
          <div class="search-btn" slot="btn">
            <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
            <el-button  size="mini" type="primary" @click="onSearchSubmit">查询</el-button>
          </div>
        </div>
        <!--刪除列-->
        <div class="table-delect-header">
          <el-button size="mini" icon="el-icon-delete" v-if="screenW >768 || tableDelectButton"  @click="deleteRows">删除</el-button>
          <!--手機版刪除按鈕-->
          <el-button size="mini" v-if="screenW<=768" @click="tableDelectButton = !tableDelectButton">
            <span v-if="tableDelectButton">取消操作</span>
            <span v-else>操作</span>
          </el-button>
        </div>
      </div>
      <div class="page-data table-loading"
           v-loading="loading "
           element-loading-customClass="loadingClass"
           element-loading-spinner="dafa-icon-loading01 dafa-icon">
        <!--開始頁面內容物-->
        <div class="el-table table-style">
          <el-table
            :data="tableData"
            ref="tableCheckedList"
            @selection-change="handleSelectionChange"
            @row-click="openPhoneBtnForm"
            :cell-class-name="`table-cell`"
            :header-cell-class-name="`table-header`">
            <el-table-column
              prop="id"
              type="selection"
              width="22"
              :fixed="screenW > 1023 ? false :'left'"
              v-if=" screenW >768 || tableDelectButton">
            </el-table-column>
            <!--編輯行-->
            <el-table-column
              label="管理账号"
              :fixed="screenW > 1023 ? false :'left'"
              min-width="130"
              class-name="title-blue title-hover-effect width130">
              <template slot-scope="scope">
                <span @click="openEditForm(scope.row, 'PC')">{{scope.row.managerName}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="updateTime"
              label="更新时间"
              min-width="130">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="添加时间"
              width="200">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--============頁碼======================-->
      <div class="page-footer margin-t10">
        <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageCurrentChange"
          :current-page = "pageNum"
          ref="pagination"
          :page-sizes="[20, 100, 300]"
          :page-size="pageSize"
          background
          :layout="screenW<=780?'total,prev,next,jumper':'total, sizes, prev, pager, next, jumper'"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <!--編輯不管什麼檔名 引用都 editForm-->
    <edit-form
      :data="editData"
      :visible = "openEditShow"
      v-on:onClose = "openEditShow=false"
    ></edit-form>
  </div>
</template>
<script>
import Api from '@/api/users'
import EditForm from '@/views/member/form/SysAccountsForm'
import {dateFormat} from '../../utils'
export default {
  data () {
    return {
      // ==============刪除表格=================
      // 刪除勾选表格___刪除按鈕手機版判斷
      tableDelectButton: false,
      // 刪除勾选表格___刪除選中List
      tableCheckedList: [],
      // ==============表格和搜尋數組=================
      // 搜尋條件數組
      ruleForm: {
        managerName: ''
      },
      // 表格數組
      tableData: [],
      visible: false, // 搜尋開關參數
      // ==============手機滑窗=================
      phoneBtnShow: false, // 展示手機按鈕的開關 (action-sheet)
      phoneDetailShow: false, // 展示手機細項開關 (popover-right)
      phoneDetailList: {}, // 单行数据的详细内容
      // ==============編輯新增彈窗=================
      openEditShow: false, // 編輯新增的開關
      editData: {}, // 編輯新增的彈窗数据
      // ==============load參數=================
      loading: false, // 表格的loading
      submitLoading: false, // 按鈕的loading
      // ==============頁碼=================
      total: 0,
      pageNum: 1,
      pageSize: 20
    }
  },
  mounted () {
    this.getList()
  },
  components: {
    EditForm
  },
  computed: {
    screenW () {
      return 1024
    }
  },
  methods: {
    // ======== 按鈕操作事件 ==========================
    // 新增彈窗
    openNewForm () {
      this.openEditShow = true
      this.editData = {}
    },
    // 修改彈窗memberAdminAreaBan
    openEditForm (arry, screen) {
      if (screen === 'PC' && this.screenW <= 768) return
      this.closePhoneBtnForm()
      this.openEditShow = true
      this.editData = arry
    },
    // 搜尋行確認事件
    onSearchSubmit () {
      this.pageNum = 1
      this.getList()
      // 手機版滑窗確認搜尋要關彈窗
      if (this.screenW <= 786) {
        this.visible = false
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // ======== 手機滑窗操作事件 ==========================
    // 手機表格按下 開啟按鈕彈窗
    openPhoneBtnForm (row, event, column) {
      if (this.screenW > 768) return
      this.phoneDetailList = row
      this.phoneBtnShow = true
    },
    // 手機表格按下的上滑的按鈕 取消事件
    closePhoneBtnForm () {
      this.phoneBtnShow = false
    },
    // 手機表格按下的上滑的 查看細項
    openPhoneDetailForm () {
      this.phoneDetailShow = true
      this.phoneBtnShow = false
    },
    // ======== 頁碼事件 ==========================
    pageSizeChange (val) {
      this.pageSize = val
      this.getList()
    },
    pageCurrentChange (val) {
      this.pageNum = val
      this.getList()
    },
    // =================刪除勾选表格============================
    // 按下按鈕
    deleteRows () {
      if (this.tableCheckedList.length < 1) {
        this.msgError('未选中记录')
        return
      }
      this.msgConfirm('此操作将删除该记录, 是否继续').then(() => {
        this.loading = true
        this.getDeleteRows()
      })
    },
    // 删除记录
    getDeleteRows () {
      let String = this.getListId()
      let parame = {
        id: String.toString()
      }
      Api.deleteManager(parame).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.msgSuccess(res.msg)
          this.pageNum = 1
          this.getList()
        }
      })
    },
    // 得到刪除id
    getListId () {
      let list = this.tableCheckedList
      let arr = []
      list.forEach(v => {
        arr.push(v.id)
      })
      return arr
    },
    // 刪除勾选表格___選中數據推入
    handleSelectionChange (val) {
      this.tableCheckedList = val
    },
    // ======== 获取列表 ==========================
    getList () {
      // this.loading = true
      let parame = {
        page: this.pageNum,
        size: this.pageSize
      }
      Api.managerList(parame).then((res) => {
        this.loading = false
        if (res.code === 200) {
          this.total = res.data.total
          res.data.content.forEach((value) => {
            value.managerName = value.account
            value.createTime = dateFormat(value.createTime)
            value.updateTime = dateFormat(value.updateTime)
            value.state = 1
          })
          this.tableData = res.data.content
        }
      })
    }
  }
}
</script>
<style scoped>
</style>
